<template>
  <div>
    <el-card class="box-card">

      <!--      面包屑-->
      <breadcrumb :naviItems.sync="naviItems"></breadcrumb>

      <!--      图表部分-->
      <div class="container">
        <div style="width: 100%;height: 50%; padding: 1%">
          <el-row style="height: 100%;">
            <el-col :span="12" style="height: 100%;">
              <div id="areaDistribute" style="width: 100%;height:100%;"></div>
            </el-col>
            <el-col :span="12" style="height: 100%">
              <div id="usedTime" style="width: 100%;height:100%;"></div>
            </el-col>
          </el-row>
        </div>
        <div style="width: 100%;height: 50%;padding: 1%">
          <el-row style="height: 100%;">
            <el-col :span="12" style="height: 100%">
              <div id="topDevStatistics" style="width: 100%;height:100%;"></div>
            </el-col>
            <el-col :span="12" style="height: 100%;">
              <div id="nominalVolStatistics" style="width: 100%;height:100%;"></div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from '../BreadCrumb/BreadCrumb.vue'
import * as echarts from 'echarts'
import 'echarts/map/js/china.js'

export default {
  data() {
    return {
      // 面包屑
      naviItems: [{text: '锅炉'}, {text: '数据引擎', to: '/guolu/dataEngine/index'}],

      /**
       *   图表相关数据-01.锅炉地域分布图
       **/
      areaDistribute: {
        option: {
          color: ['#3177c2'],
          title: {
            //show:false,
            left: "center",
            top: '1%',
            text: '锅炉地域分布',
            textStyle: {
              fontSize: 15,
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {},
          legend: {},
          xAxis: {
            data: ["安徽","山东","江苏",
              "浙江","河南","河北",
              "吉林","甘肃","山西"]
          },
          yAxis: {
            type: 'value',   //刻度自适应
            scale: true,
            name: '单位：台',
          },
          series: [{
            //name: '台',
            barWidth: '30%',
            type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [236,50,1,7,2,2,1,1,1],
            label: {  //图上方显示值
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        },
      },

      /**
       *   图表相关数据-02.锅炉投入使用年份
       **/
      usedTime: {
        option: {
          color: ['#3177c2'],
          title: {
            //show:false,
            left: "center",
            top: '1%',
            text: '锅炉使用年份',
            textStyle: {
              fontSize: 15,   //不知道为什么这个设置无效
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {},
          legend: {},
          xAxis: {
            axisLabel: {//文字倾斜
              interval: 0,
              rotate: 40
            },
            data: ["1994年", "1995年", "1996年", "1997年", "1998年", "1999年","2000年", "2001年", "2002年",
                   "2003年", "2004年", "2005年","2006年",
                   "2007年", "2008年", "2009年", "2010年", "2011年", "2012年", "2013年", "2018年", "2019年"]
          },
          yAxis: {
            type: 'value',
            //scale: true,
            name: '单位：台',
            minInterval: 1,
            boundaryGap: [0, 0.1],
          },
          series: [{
            barWidth: '50%',
            type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [1,1,1,1,2,4,5,5,4,23,19,7,10,17,9,6,10,5,8,16,27,14],
            label: {  //图上方显示值
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        }

      },

      /**
       * 图表相关数据-03 锅炉类型统计图
       */
      topDev: {
        option: {
          color: ['#d0961f', 'rgba(14,178,243,0.76)','#d0661f'],
          title: {
            //show:false,
            left: "10%",
            top: '1%',
            text: '锅炉类型',
            textStyle: {
              fontSize: 15,
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },

          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: 'bottom',
            left: 'center',
          },
          series: [{
            radius: '80%',
            type: 'pie',
            data: [
              {value: 270, name: '承压蒸汽锅炉'},
              {value: 31, name: '有机热载体锅炉'},
              {value: 0, name: '承压热水锅炉'},
            ],
            label: {  //图上方显示值
              normal: {
                show: true,
                formatter:function(data){
                  return data.value+',\n  '+data.percent.toFixed(0)+"%"; //取小数点后0位
                  },
                position:'inside'
              }
            },

            emphasis: {
              itemStyle: {
                shadowBlur: 30,
                shadowOffsetX: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
      },

      /**
       * 图表相关数据04 锅炉压力等级统计图
       */
      nominalVol: {
        option: {
          color: ['#3177c2'],
          title: {
            //show:false,
            left: "center",
            top: '1%',
            text: '锅炉压力统计',
            textStyle: {
              fontSize: 15,   //不知道为什么这个设置无效
              fontWeight: 'bold',
              color: '#3e7bd6'
            }
          },
          tooltip: {},
          legend: {},
          xAxis: {
            data: ["低压", "中压", "次高压", "高压","超高压", "亚临界", "超临界","超超临界"]
          },
          yAxis: {
            type: 'value',
            //scale: true,
            name: '单位：°C',
            minInterval: 1,
            boundaryGap: [0, 0.1],
          },
          series: [{
            barWidth: '50%',
            type: 'bar',       //柱状图，line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...
            data: [211,43,19,1,0,1,2,2],
            label: {  //图上方显示值
              normal: {
                show: true,
                position: 'top'
              }
            }
          }]
        }

      },

    }
  }
  ,
  created() {

  }
  ,
  mounted() {
    this.areaDistributeShow();
    this.topDevStatisticsShow();
    this.usedTimeShow();
    this.nominalVolStatisticsShow();
  }
  ,
  components: {
    Breadcrumb,
  }
  ,
  methods: {


    areaDistributeShow: function () {
      var chartDom = document.getElementById('areaDistribute');
      var myChart = echarts.init(chartDom);
      var option = this.areaDistribute.option
      myChart.setOption(option);
    }
    ,


    topDevStatisticsShow: function () {
      let chartDom1 = document.getElementById('topDevStatistics');
      let myChart2 = echarts.init(chartDom1);
      let option2 = this.topDev.option
      myChart2.setOption(option2);
    } ,
    usedTimeShow: function () {
      var chartDom1 = document.getElementById('usedTime');
      var myChart2 = echarts.init(chartDom1);
      var option2 = this.usedTime.option
      myChart2.setOption(option2);
    } ,

    nominalVolStatisticsShow: function () {
      let chartDom1 = document.getElementById('nominalVolStatistics');
      let myChart2 = echarts.init(chartDom1);
      let option2 = this.nominalVol.option
      myChart2.setOption(option2);
    },

    // 获取页面需要的数据
    async searchDetailData() {
      const res = await searchDataEngineDetailData(this.detailDataSearchArgs)
      this.detailData = res.data
      // 设置各个图表
      //  await this.setGeoChart([{ name: '重庆', value: 455449}])
      await this.setGeoChart(this.detailData.DistrictInfo)
      await this.setGasTypeChart(this.detailData.GasTypeInfo)
      await this.setGasUseYearsChart(this.detailData.UseYearsInfo)
      await this.setRecordChart(this.detailData.GasRecordInfo)
    }
    ,
  }
}

</script>

<style lang="less" scoped>

div.container {
  height: 82vh; //相对于视图高度100%
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-weight: 500;
}
</style>
